/**
 * 卡片表格
 */
import * as React from 'react'
import { Spin, Button, Checkbox } from 'antd'
import Zmage from '../reactZmage'
import * as style from './index.less'
export interface Props {
  selectedRows?: Array<any> //选中的行
  onSelectRow?: (row: any) => void  //选中事件
  onLoadMore: () => void    //表单条件改变事件
  data: any [] //table内容
  loading: boolean //表格是否加载中
  rowKey?: string   //表格key列
  select: boolean   //是否开启选择模式
  textRow?: string //下面显示的文字是哪几列
  picKey: string //图片字段
  showLoadingMore?: boolean
  selectKey?: string
  resolve?: boolean
  onClickBtn?: (like: boolean, sampleid: string) => void
  onClick?: (row: any) => void
}
export interface State {
  selectedRowKeys: any []
  list: any []
}
class CardTable extends React.Component<Props, State> {
  state = {
    selectedRowKeys: [],
    list: [],
  }
  componentWillReceiveProps (nextProps: any) {
    const { selectedRows, data } = nextProps
    const { selectedRowKeys, list } = this.state
    if (JSON.stringify(selectedRows) !== JSON.stringify(selectedRowKeys)) {
      this.setState({
        ...this.state,
        selectedRowKeys: selectedRows
      })
    }
    if (JSON.stringify(data) !== JSON.stringify(list)) {
      let ls = data
      ls.map((row: any) => {
        Object.assign(row, { isClick: false })
      })
      this.setState({
        ...this.state,
        list: ls
      })
    }
  }
  onLoadMore = () => {
    const { onLoadMore } = this.props
    onLoadMore()
  }
  onClick = (row: any) => {
    const { onClick } = this.props
    if(onClick) onClick(row)
  }
  cleanSelectedKeys = () => {
    this.setState({
      selectedRowKeys: []
    })
  }
  changeChoose = (param: any, e: any) => {
    const { onSelectRow } = this.props
    const { selectedRowKeys } = this.state
    let keys: any [] = []
    if(e.target.checked) {
      keys = [...selectedRowKeys, param]
    }else {
      keys = selectedRowKeys
      keys.remove(param)
    }
    this.setState({
      ...this.state,
      selectedRowKeys: keys
    })
    if(onSelectRow) onSelectRow(keys)
  }
  //点击操作按钮
  handleClickOp = (type: number, sampleid: string) => {
    const { list } = this.state
    const { onClickBtn } = this.props
    const changeList = list
    changeList.map((r: any) => {
      if(r.sampleid == sampleid) {
        r.isClick = true
        if(type == 1) r.redvalue++
        else r.addvalue++
        return
      }
    })
    this.setState({
      ...this.state,
      list: changeList
    })
    if(onClickBtn) onClickBtn(type==2, sampleid)
  }
  render () {
    const { selectedRowKeys, list } = this.state
    const { rowKey, textRow, picKey, resolve, showLoadingMore = true, loading, select = false, selectKey, onClick, onClickBtn } = this.props
    const seKey = selectKey || 'sampleid'
    const loadMore = showLoadingMore ? (
      <div style={{ textAlign: 'center', marginTop: 12, height: 32, lineHeight: '32px' }}>
          {loading && <Spin />}
          {!loading ? <Button onClick={this.onLoadMore}>加载更多</Button> : ''}
      </div>
    ) : null
    const getImg = (src: any) => {
      if(onClick  ) return <img className={style.itemImg} src={src}/>
      else return <Zmage className={style.itemImg} src={src}/>
    }
    return (<div className={style.moduleArea}>
      {/* {select&&<div className="tableAlert">
        <Alert
          message={
            <React.Fragment>
              已选择 <a style={{ fontWeight: 600 }}>{selectedRowKeys.length}</a> 项&nbsp;&nbsp;
              <a onClick={this.cleanSelectedKeys} style={{ marginLeft: 24 }}>
              清空
              </a>
            </React.Fragment>
          }
          type="info"
          showIcon
        />
      </div>} */}
      <div>
        <div className={style.tList} >
          {list.map((row: any) => (
            <div key={row[`${rowKey}`]} className={style.item}>
              {select&&(<div className={style.imgCheck}>
                <Checkbox checked={selectedRowKeys.contains(row[seKey])} onChange={(e: any) =>this.changeChoose(row[seKey], e)}/>
              </div>)}
              <div className={style.itemImgDiv} onClick={() => this.onClick(row)}>
                {getImg(row[picKey])}
                <div className={style.picId}>编号：{row.sampleid}</div>
              </div>
              <div className={style.itemText}>
                {textRow&&<span>状态：{row[textRow]}</span>}
                {onClickBtn&&(
                  <div style={{ lineHeight: '55px' }}>
                    <span className={style.opBtn}>
                      <Button
                        disabled = {row.isClick}
                        shape="circle" 
                        style={{ backgroundColor: "#d81e06", color: "#ffffff" }}
                        icon="dislike" 
                        onClick={() => this.handleClickOp(1, row.sampleid)}/>
                      <span style={{marginLeft: '10px'}}>{row.redvalue}</span>
                    </span>
                    <span className={style.opBtn}>
                      <Button
                        disabled = {row.isClick}
                        shape="circle" 
                        style={{ backgroundColor: "#17c913", color: "#ffffff" }}
                        icon="like" 
                        onClick={() => this.handleClickOp(2, row.sampleid)}/>
                      <span style={{marginLeft: '10px'}}>{row.addvalue}</span>
                    </span>
                  </div>
                )}
                {resolve&&(<div className={style.resolveInfo}>
                  <div className={style.resolveInfoRow}>
                    <span>总得分：{row.totscore}</span><span>买手：{row.buyer}</span>
                  </div>
                  <div className={style.resolveInfoRow}>
                    <span>店长：{row.Shopowner}</span><span>采购经理：{row.buyManager}</span>
                  </div>
                  <div className={style.resolveInfoRow}>
                    <span>买手团队：{row.buyertm}</span><span>外围团队：{row.othertm}</span>
                  </div>
                </div>)}
                {row.twocksub&&(<div className={style.resolveInfo}>
                  <div className={style.resolveInfoRow}>
                    <span>买手审核：{row.twocksub}</span><span>经理审核：{row.twockmanager}</span>
                  </div>
                </div>)}
                {/* {textRow.map((text: any, index: number) => (
                  <span key={index} style={{width: `${text.width}%`}}>
                  {text.title&&`${text.title}：`}{row[`${text.key}`]}</span>
                ))} */}
              </div>
            </div>
          ))}
        </div>
        {loadMore}
      </div>
    </div>)
  }
}
export default CardTable